<template>
  <div class="orders">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button size="mini"
          type="primary"
          @click="addFromDialog = true"
          style="margin-bottom: 10px"
          >新增订单</el-button
        >
      </div>
      <!-- 新增订单 -->

      <div>
        <el-input size="mini"
          style="width: 250px"
          v-model="input"
          placeholder="输入客户名称,版号,产品名称"
        ></el-input>
        <!-- 搜索 -->
        <el-button size="mini"
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="likeEmployee()"
        ></el-button>

        <!-- <el-select
          v-model="receiptsStatusValue"
          style="width: 150px"
          placeholder="入库状态"
        >
          <el-option
            v-for="item in receiptsStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <!-- <el-button type="success" @click="receiptsStatusSelect">查询</el-button> -->
      </div>
    </div>

    <div class="goods-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        style="width: 100%"
        height="100%"
      >
        <el-table-column prop="cusNum" label="序号" fit width="50" fixed>
          <!-- 通过素组长度计算 -->
          <template slot-scope="scope">
            {{ serializeNumber(scope.$index + 1) }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="客户名称" fit width="100" fixed v-if="qx">
        </el-table-column>
        <el-table-column prop="versionNumber" label="版号" fit width="90">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" fit width="150">
        </el-table-column>

        <el-table-column prop="price" label="价格" fit width="55" v-if="qx">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="交货日期" fit width="80">
        </el-table-column>
        <el-table-column prop="isSend" label="是否发货" fit width="80">
          <template slot-scope="scope">
            {{ scope.row.isSend == 0 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="stOne" label="绘图" fit width="120">
        </el-table-column>
        <el-table-column prop="stTwo" label="切割" fit width="120">
        </el-table-column>
        <el-table-column prop="stThree" label="装刀" fit width="120">
        </el-table-column>
        <el-table-column prop="stFour" label="装线" fit width="120">
        </el-table-column>
        <el-table-column prop="stFive" label="打包" fit width="120">
        </el-table-column>
        <el-table-column prop="surPrice" label="附加费" fit width="70">
        </el-table-column>

        <!-- <el-table-column prop="stOne" label="流水线" fit width="120">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="hover">
              <div>
                <div>绘图：{{ scope.row.stOne }}</div>

                <div>切割：{{ scope.row.stTwo }}</div>

                <div>装刀：{{ scope.row.stThree }}</div>

                <div>装线：{{ scope.row.stFour }}</div>

                <div>打包：{{ scope.row.stFive }}</div>

                <div>附加费：{{ scope.row.surPrice }}</div>
              </div>
            </el-popover>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="surPrice" label="附加费" fit width="80">
        </el-table-column> -->
        <el-table-column prop="count" label="错误原因" fit width="80">
        </el-table-column>
        <el-table-column prop="head" label="负责人" fit width="80">
        </el-table-column>
        <el-table-column
          prop="triggerSituation"
          label="处罚情况"
          fit
          width="80"
        >
        </el-table-column>
        <el-table-column prop="deliveryId" label="出货单" fit width="80">
        </el-table-column>
        <el-table-column prop="count" label="备注" fit width="80">
        </el-table-column>
        <el-table-column prop="userId" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="more(scope.row)" type="text">
				编辑
			</el-button>
			<el-divider v-if="roleType" direction="vertical"></el-divider>
            <el-button v-if="roleType" size="mini" type="text" @click="deleteGoods(scope.row)">
				删除
			</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 查看更多 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog2"
      width="74%"
      :show-close="false"
      title="更多信息"
    >
      <el-form
        :model="genduo"
        :inline="true"
        ref="genduo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 序号 -->
        <!-- <el-form-item label="序号：" prop="cusNum">
          <template slot-scope="scope">
            {{ serializeNumber(scope.$index + 1) }}
          </template>
        </el-form-item> -->
        <!-- 客户名称 -->
        <el-form-item label="客户名称：" prop="name">
          <el-input
            type="text"
            v-model="genduo.name"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>
        <!-- 版号 -->
        <el-form-item label="版号：" prop="versionNumber">
          <el-input
            type="text"
            v-model="genduo.versionNumber"
            placeholder="版号"
          ></el-input>
        </el-form-item>
        <!-- 产品名称 -->
        <el-form-item label="产品名称：" prop="productName">
          <el-input
            type="text"
            v-model="genduo.productName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item label="价格：" prop="price">
          <el-input
            type="text"
            v-model="genduo.price"
            placeholder="价格"
          ></el-input>
        </el-form-item>
        <!-- 交货日期 -->
        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input
            type="text"
            v-model="genduo.deliveryTime"
            placeholder="数量"
          ></el-input>
        </el-form-item>
        <!-- 是否发货 -->
        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="genduo.isSend" placeholder="是否发货">
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 绘图 -->
        <el-form-item label="绘图：" prop="stOne">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stOne"
              placeholder="绘图"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check1" @change="stUpdate('check1', 1)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>

        <!-- 切割 -->
        <el-form-item label="切割：" prop="stTwo">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stTwo"
              placeholder="切割"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check2" @change="stUpdate('check2', 2)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>

        <!-- 装刀 -->
        <el-form-item label="装刀：" prop="stThree">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stThree"
              placeholder="装刀"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check3" @change="stUpdate('check3', 3)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>
        <!-- 装线 -->
        <el-form-item label="装线：" prop="stFour">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stFour"
              placeholder="装线"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check4" @change="stUpdate('check4', 4)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>

        <!-- 打包 -->
        <el-form-item label="打包：" prop="stFive">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stFive"
              placeholder="打包"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check5" @change="stUpdate('check5', 5)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>

        <!-- 附加费 -->
        <!-- <el-form-item label="附加费：" prop="surPrice">
          <el-input
            type="text"
            v-model="genduo.surPrice"
            placeholder="附加费"
          ></el-input>
        </el-form-item> -->

        <!-- 附加费 -->
        <el-form-item label="附加费：" prop="surPrice">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.surPrice"
              placeholder="附加费"
            ></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="check6" @change="stUpdate('check6', 6)"
              >选择</el-checkbox
            >
          </div>
        </el-form-item>

        <!-- 错误原因 -->
        <el-form-item label="错误原因：" prop="count">
          <el-input
            type="text"
            v-model="genduo.count"
            placeholder="错误原因"
          ></el-input>
        </el-form-item>

        <!-- 负责人 -->
        <el-form-item label="负责人：" prop="head">
          <el-input
            type="text"
            v-model="genduo.head"
            placeholder="负责人"
          ></el-input>
        </el-form-item>

        <!-- 处罚情况 -->
        <el-form-item label="处罚情况：" prop="triggerSituation">
          <el-input
            type="text"
            v-model="genduo.triggerSituation"
            placeholder="处罚情况"
          ></el-input>
        </el-form-item>

        <!-- 出货单 -->
        <el-form-item label="出货单：" prop="deliveryId">
          <el-input
            type="text"
            v-model="genduo.deliveryId"
            placeholder="出货单"
          ></el-input>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注：" prop="count">
          <el-input
            type="text"
            v-model="genduo.count"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- //修改按钮，靠右边 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateOrders" v-show="qx" v-debounce>
			保 存
		</el-button>
        <el-button @click="addFromDialog2 = false">取 消</el-button>
      </span>
      <!-- {{ genduo }} -->
    </el-dialog>

    <!-- 新增产品 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog"
      width="50%"
      :show-close="false"
      :title="title"
    >
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
      </el-form>
      <!--  -->
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="客户名称：" prop="name">
          <el-input
            type="text"
            v-model="prudproducts.name"
            placeholder="客户名称"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="客户名称：" prop="name">
          <el-autocomplete
            v-model="prudproducts.name"
            :fetch-suggestions="querySearchAsync"
            placeholder="客户名称："
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>

        <el-form-item label="版号：" prop="versionNumber">
          <el-input
            type="text"
            v-model="prudproducts.versionNumber"
            placeholder="版号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品名称：" prop="productName">
          <el-input
            type="text"
            v-model="prudproducts.productName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格：" prop="price">
          <el-input
            type="text"
            v-model="prudproducts.price"
            placeholder="价格"
          ></el-input>
        </el-form-item>

        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input
            type="text"
            v-model="prudproducts.deliveryTime"
            placeholder="数量"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="prudproducts.isSend" placeholder="是否发货">
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitaddEmployeeForm" v-debounce>
			确 定
		</el-button>
        <!-- <el-button type="primary" @click="UpdateEmployee(1)">修 改</el-button>
        <el-button type="primary" @click="UpdateEmployee(2)"
          >新增产品</el-button
        > -->
        <el-button @click="addFromDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  addEmployeeProfile,
  selectEmployeeProfileByName,
  devicesSelectList, //查询仓库产品列表
  createOrder, //创建刀模订单
  getOrderList, //查询刀模订单列表
  updateOrderStatus, //用户修改自己做的订单状态
  updateOrder, //修改订单
  getOrderListByLike, //模糊查询
  selectAllCustom, //查询所有客户
} from "../../api/die.js";
export default {
  components: {},
  data() {
    return {
      xuhao: [], //序号
      qx: false, //权限
      restaurants: [],
      state: "",
      timeout: null,
      check1: false,
      check2: false,
      check3: false,
      check4: false,
      check5: false,
      check6: false,
      //搜索框的值
      input: "",
      // 图片预览
      srcList: [],
      srcList2: [],
      //新增标题
      title: "新增产品",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,
      addFromDialog2: false,
      addFromDialog3: false,
      // 表格加载
      loading: false,
      //合同到期提醒
      dialogImageUrl: "",
      dialogVisible: false,
      genduo: "", //查看更多
      //新增订单数据
      prudproducts: {
        name: "",
        versionNumber: "",
        productName: "",
        price: "",
        deliveryTime: "",
        isSend: "",
      },
      tableData: [],
      //总数页
      total: 1,
      //是否发货
      SexCategory: [
        { value: 0, label: "是" },
        { value: 1, label: "否" },
      ],
      // 分页大小
      pageSize: 50,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
    };
  },
  mounted() {
    //本地缓存查询当前用户权限
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    // kese.roleid == "9" ? (this.qx = true) : (this.qx = false);
    this.qx = userInfo.roleId == "10" ? false : true;
    selectAllCustom().then((res) => {
      if (res.code) {
        let arr = [];
        for (let it = 0; it < res.data.length; it++) {
          arr.push({
            value: res.data[it].customName,
            address: res.data[it].dieCustomId,
          });
        }
        this.restaurants = arr;
      } else {
        this.$message("查询失败");
      }
    });
    if (userInfo.roleId == "1") {
      this.roleType = true;
    }
    this.getAllGoods();
    // console.log("初始化时间:", dayjs())
    //通过入库名称搜索框查询
  },
  //超级管理员显示功能
  methods: {
    // 序号序列化
    serializeNumber(num) {
      if (num < 10) {
        return "00" + num;
      } else if (num < 100) {
        return "0" + num;
      } else {
        return num.toString();
      }
    },
    handleSelect(item) {
      console.log(item);
    },
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },

    //用户修改自己做的订单状态
    stUpdate(ch) {
      let type = "";
      let status = "2";
      if (ch == "check1") {
        type = 1;
        if (this.check1) {
          status = "1";
        }
      } else if (ch == "check2") {
        type = 2;
        if (this.check2) {
          status = "1";
        }
      } else if (ch == "check3") {
        type = 3;
        if (this.check3) {
          status = "1";
        }
      } else if (ch == "check4") {
        type = 4;
        if (this.check4) {
          status = "1";
        }
      } else if (ch == "check5") {
        type = 5;
        if (this.check5) {
          status = "1";
        }
      } else if (ch == "check6") {
        type = 6;
        if (this.check6) {
          status = "1";
        }
      }

      this.updcha(type, status);
    },

    //修改订单
    updateOrders() {
      updateOrder(this.genduo).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          //刷新数据
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },
    //查看更多
    more(row) {
      this.check1 = false;
      this.check2 = false;
      this.check3 = false;
      this.check4 = false;
      this.check5 = false;
      this.check6 = false;

      this.addFromDialog2 = true;
      this.genduo = row;
      //从本地拿到用户信息
      let user = localStorage.getItem("userInfo");
      let userObject = JSON.parse(user);
      let stOneArr = this.genduo.stOne
        ? this.genduo.stOne.split(",").filter((item) => item !== "")
        : [];
      let stTwoArr = this.genduo.stTwo
        ? this.genduo.stTwo.split(",").filter((item) => item !== "")
        : [];
      let stThreeArr = this.genduo.stThree
        ? this.genduo.stThree.split(",").filter((item) => item !== "")
        : [];
      let stFourArr = this.genduo.stFour
        ? this.genduo.stFour.split(",").filter((item) => item !== "")
        : [];
      let stFiveArr = this.genduo.stFive
        ? this.genduo.stFive.split(",").filter((item) => item !== "")
        : [];
      let stSixArr = this.genduo.surPrice
        ? this.genduo.surPrice.split(",").filter((item) => item !== "")
        : [];

      let optArr = [
        stOneArr,
        stTwoArr,
        stThreeArr,
        stFourArr,
        stFiveArr,
        stSixArr,
      ];

      for (let i = 0; i < optArr.length; i++) {
        for (let j = 0; j < optArr[i].length; j++) {
          if (optArr[i][j] == userObject.nickName) {
            switch (i) {
              case 0:
                this.check1 = true;
                break;
              case 1:
                this.check2 = true;
                break;
              case 2:
                this.check3 = true;
                break;
              case 3:
                this.check4 = true;
                break;
              case 4:
                this.check5 = true;
                break;
              case 5:
                this.check6 = true;
                break;
            }
          }
        }
      }
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      console.log("Filtered results: ", this.restaurants);

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },

    //用户修改
    updcha(type, status) {
      updateOrderStatus(this.genduo.customId, type, status).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          //刷新数据
          //关闭弹窗
          this.addFromDialog2 = false;
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },

    // 新增产品
    submitaddEmployeeForm() {
      //交货日期
      createOrder(this.prudproducts).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "新增失败",
          });
        }
      });
      this.addFromDialog = false;
    },

    //模糊查询信息
    likeEmployee() {
      console.log("模糊查询");
      getOrderListByLike(this.input).then((res) => {
        if (res.code) {
          this.tableData = res.data;
        } else {
          this.$message("查询失败");
        }
      });
    },

    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },

    // 查询列表
    getAllGoods() {
      //   this.loading = true;
      getOrderList(this.currentPage, this.pageSize).then((res) => {
        if (res.code) {
          this.total = res.data.total;
          this.tableData = res.data.dieOrderList;
          let it = 0;
          this.tableData.forEach((item) => {
            this.xuhao.push(this.serializeNumber(it++));
          });
          //   this.loading = false;
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
  },
};
</script>

<style scoped>
.orders {
  height: 100%;
}

.page {
  text-align: center;
}

.nameBox {
  overflow: auto; /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
